<template>
  <div  class="chongzeng">
    <div class="t">
      <div class="t1"></div>
      <van-nav-bar
        title="充值咖啡钱包"
         right-text="更多优惠"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="m">
      <div class="t">
        <div class="t1">
          购买以下饮品券享<span>充2赠1</span>，不同饮品劵可组合购买
        </div>
      </div>

      <div class="z">
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B1全国通用</span>
          </div>
            <van-stepper v-model="value" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B2全国通用</span>
          </div>
            <van-stepper v-model="value1" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B3全国通用</span>
          </div>
            <van-stepper v-model="value2" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B4全国通用</span>
          </div>
            <van-stepper v-model="value3" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B5全国通用</span>
          </div>
            <van-stepper v-model="value4" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B6全国通用</span>
          </div>
            <van-stepper v-model="value5" class="b13"/>
        </div>
      </div>

    </div>

    <div class="b">
      <div class="left">
        <span class="l1">应付合计</span>
        <span class="l2">￥21</span>
      </div>
      <div class="right">
        <span class="r3">去结算</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      value5: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({name:'QianBao'});
    }
  }
}
</script>


<style scoped>
  .chongzeng{
    width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.t{
  height: 64px;
}
.t1{
  height: 20px;
}
.t2{
  height: 44px;
}
.m{
  flex:1;
  background: ghostwhite;
  overflow-y: auto;
  padding: 0 15px;
}
.m .t .t1{
  height: 60px;
  font-size: 14px;
  line-height: 60px;
}
.m .b1{
   height: 60px;
   color: rgba(80, 80, 80, 1);
	 background-color: rgba(255, 255, 255, 1);
	 box-shadow: rgba(242, 242, 242, 1) solid 1px;
	 font-size: 14px;
   display: flex;
   line-height: 60px;
   margin-bottom: 10px;
}
.b11{
  margin-left: 15px;
}
.b11 span{
  font-size: 23px;
}
.b12{
  margin-left: 20%;
}
.b13{
  margin-left: 10%;
}
.b13 .jian span{
  background: palegreen;
  display: block;
  width: 16px;
  height: 16px;
}
.m .t .t1 span{
  color: orange;
}
.b{
  height: 60px;
  display: flex;
}
.b .left{
  width: 70%;
}
.b .left .l1{
  margin-left: 10px;
  line-height: 60px;
}
.b .left .l2{
  font-weight: 600;
  font-size: 23px;
  margin-left: 8px;
}
.b .right{
  width: 30%;
  background:skyblue;
}
.b .right .r3{
  line-height: 60px;
  margin-left: 30px;
  color: white;
}
</style>
